<template>
    <div id="MemberList">
        <div class="breadcrumb ">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>
                <el-tag>订单管理</el-tag>
            </el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="table">
             <el-table
                :data="tableData.filter(data => !search || data.bianhao.includes(search))"
                borde
                style="width: 100%"
                height="550">
                <el-table-column
                  label="订单id"
                  prop="id"
                  width="75">
                </el-table-column>

                <el-table-column
                  label="订单编号"
                  prop="bianhao"
                  width="120">
                </el-table-column>

                <el-table-column
                  label="总金额"
                  prop="totalPrice"
                  width="75">
                </el-table-column>

                <el-table-column
                  label="支付方式"
                  prop="pay"
                  width='120'>
                </el-table-column>



                <el-table-column
                  label="订单详情"
                 width="120"
                >
                   <template slot-scope="scope">
                      <router-link :to="{path:'/index/orderList/orderDetail',query:{bianhao:scope.row.bianhao}}">查看</router-link>
                   </template>
                </el-table-column>

                 <el-table-column
                  width='150'
                  label="鲜活蔬菜送达时间"
                  prop="servicetime">
                </el-table-column>
                <el-table-column
                  label="下单时间"
                  prop="time"
                  width='200'>
                </el-table-column>
                <el-table-column
                  label="状态"
                  prop="status">
                </el-table-column>

                <el-table-column
                  align="right"
                  width='250'>
                  <template slot="header" slot-scope="scope">
                    <el-input
                      v-model="search"
                      size="mini"
                      placeholder="输入订单号搜索"/>
                  </template>

                  <template slot-scope="scope">

            <!--       <span v-if="scope.row.status='待支付'"> -->
                    <el-button
                      v-if="scope.row.status==='待发货'&&scope.row.post===1"
                      size="mini"
                      type="primary"
                      @click="postInfo(scope.row.bianhao,scope.row.token)">去发布采购</el-button>
                    <el-button
                     v-else-if="scope.row.status==='待发货'&&scope.row.post===-1"
                      size="mini"
                      type="primary"
                      disabled
                      @click="postInfo(scope.row.bianhao,scope.row.token)">去发布采购</el-button>
                   
                  
                    <el-button
                      v-else
                      style="display:none"
                      size="mini"
                      type="primary"
                     >去发布采购</el-button>
         

                    <el-button
                      size="mini"
                      type="danger"
                      @click="handleDel(scope.row.id)">删除订单</el-button>
                  </template>
                </el-table-column>
              </el-table>
        </div>
        <router-view></router-view>
    </div>

</template>
<script>
    import { getOrdermaster,delOrder} from './../../../service/api/index.js'
     export default{
       name:"GoodsList",
            data() {
              return {
                  tableData: [],
                     search: '',

              }
            },
            
           
            
          
   
            mounted(){
               
            },
            


            created(){
                 //请求网络数据   调用getVegetables返回promise对象，然后可以调用promise的then方法，返回请求到的数据(response.data)  
                  getOrdermaster().then((response)=>{
                       console.log(response);
                       this.tableData = response.data;
                        for (var i=0;i<(this.tableData).length;i++) {
                               if (this.tableData[i].status===-1) {
                                    this.tableData[i].status='待支付';
                               }else if(this.tableData[i].status===1){
                                     this.tableData[i].status='待发货';
                               }else if (this.tableData[i].status===0) {
                                    this.tableData[i].status='已发货';
                               }else if (this.tableData[i].status===2) {
                                    this.tableData[i].status='已完成';
                               };
                               if (this.tableData[i].pay===1) {
                                   this.tableData[i].pay='微信支付';
                               };
                               if (this.tableData[i].servicetime==='') {
                                   this.tableData[i].servicetime='无';
                               };
                        }
                 }).catch(error=>{
                       // todo......
                      console.log(error);
                 })   //---catch



            }, // ----created

            methods:{
                async postInfo(bianhao,token){
                     this.$router.push({
                          path:'/index/orderList/postInfo',
                          query:{bianhao:bianhao,token:token}
                     });
                },

                // 删除用户
                 async handleDel(id){
                     let res = await delOrder(id);
                     console.log(res);
                     if (res.status===200) {
                         this.$message({
                              message: '删除订单成功',
                              type: 'success'
                            });
                          window.location.reload();
                     }
                 },



            }
     }
    
</script>
<style lang="less" scope>
   #MemberList{
     position:relative;
     width:100%;
     height:100%;
     background-color:#f5f5f5;
   }

    .breadcrumb {
     margin-right: 0.2rem;
     margin-left: 0.2rem;
     margin-top: 0.1rem;
     margin-bottom: 0.1rem;
     background-color:white;
     padding: 0.06rem;
     height:0.6rem;
     border-radius: 4px
   }
    
    .list{
      margin-left: 2rem;
      margin-right: 2rem;
   }
</style>